<script setup lang="ts">
import { RouterView } from 'vue-router'
</script>

<template>
  <div class="app-wrapper">
    <el-container class="app-container">
      <el-header class="app-header">
        <div class="header-content">
          <div class="logo-container">
            <!-- <img src="/server-icon.svg" alt="Logo" class="logo" /> -->
            <h1>本地服务管理系统</h1>
          </div>
        </div>
      </el-header>
      <el-main class="app-main">
        <div class="main-content">
          <RouterView />
        </div>
      </el-main>
      <el-footer class="app-footer">
        <div class="footer-content">
          <p>© 2024 本地服务管理系统 | 版本 1.0.0</p>
        </div>
      </el-footer>
    </el-container>
  </div>
</template>

<style>
body {
  margin: 0;
  padding: 0;
  font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', Arial, sans-serif;
  background-color: #f5f7fa;
}

.app-wrapper {
  width: 100%;
  min-height: 100vh;
}

.app-container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.app-header {
  background-color: #409EFF;
  color: white;
  padding: 0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  width: 100%;
}

.header-content {
  max-width: 1440px;
  margin: 0 auto;
  width: 100%;
  padding: 0 20px;
  height: 100%;
  display: flex;
  align-items: center;
}

.logo-container {
  display: flex;
  align-items: center;
}

.logo {
  height: 40px;
  margin-right: 10px;
}

.app-main {
  flex: 1;
  padding: 0;
}

.main-content {
  max-width: 1440px;
  margin: 0 auto;
  width: 100%;
  padding: 0 20px;
}

.app-footer {
  background-color: #f5f7fa;
  color: #606266;
  text-align: center;
  padding: 15px 0;
  margin-top: auto;
  width: 100%;
}

.footer-content {
  max-width: 1440px;
  margin: 0 auto;
  width: 100%;
  padding: 0 20px;
}

@media (max-width: 768px) {
  .header-content,
  .main-content,
  .footer-content {
    padding: 0 10px;
  }
}

@media (min-width: 1921px) {
  .header-content,
  .main-content,
  .footer-content {
    max-width: 1600px;
  }
}
</style>
